<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p3_固定定位技巧一</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            font-size: 40px;
            color: #FFFFFF;
            font-weight: bold;
            position: fixed;
            top: 0px;
            width: 100vw;
        }

        .left, .right {
            width: 60px;
            height: 200px;

            position: fixed;
            top: 300px;

        }

        .right {
            background-color: #f35336;
            right: 20px;
        }

        .left {
            background-color: #fff799;
            left: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>Z
<div class="top">我是顶部 广告</div>
<div class="left">我是左侧 广告</div>
<div class="right">我是右侧 广告</div>

<div class="main">我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam assumenda consequatur cumque
        doloribus, eaque ex excepturi fugiat illo nobis officiis provident quae, quod ratione similique tempore totam,
        ullam voluptatum.
    </div>
    <div>Adipisci consequuntur debitis dignissimos eaque, illum libero quas. Consequuntur debitis dolor eaque explicabo
        id inventore maiores mollitia omnis sed tempore? Dignissimos eum libero maiores molestias nostrum odit
        perspiciatis porro repellendus.
    </div>
    <div>At cumque debitis molestias quam reprehenderit soluta, ullam! A accusantium asperiores assumenda atque
        blanditiis cupiditate debitis distinctio, facere id, illo iusto odit perferendis porro quia quidem soluta
        tenetur veritatis, voluptatum?
    </div>
    <div>A accusamus architecto doloremque doloribus esse, incidunt ipsum natus nisi officia optio rem vitae voluptatum.
        Aut autem doloremque, error illo inventore natus numquam perspiciatis similique, sint ullam veniam voluptas
        voluptatibus.
    </div>
    <div>Aliquam assumenda deleniti dicta distinctio dolore dolores doloribus expedita facere hic illo impedit ipsam
        laborum minus mollitia necessitatibus nihil non, optio praesentium quidem sapiente, sed sit vitae, voluptatem.
        Earum, quaerat?
    </div>
    <div>Accusamus, alias consectetur debitis deserunt distinctio dolor dolorem eaque esse ipsa magni minima
        necessitatibus nobis non obcaecati provident recusandae sit ullam! Fuga iure nisi odit placeat ullam. Doloremque
        inventore, quaerat.
    </div>
    <div>Fugiat quasi sint vero! Ab ad adipisci alias aliquid animi atque dolorum eaque, et incidunt iusto magni nam
        nemo odit officia pariatur provident saepe sint tempora tenetur ullam voluptatibus voluptatum!
    </div>
    <div>Aliquid culpa distinctio ex modi numquam quaerat quas quasi quod rem veritatis! At autem consectetur culpa
        explicabo fugiat hic iure magni, non nulla officia praesentium qui quo repellat rerum veniam.
    </div>
    <div>Accusamus adipisci aut beatae blanditiis, consectetur consequuntur delectus dolore doloribus dolorum earum
        incidunt magnam maxime minus quidem quisquam recusandae repellendus saepe sequi? Accusamus autem consectetur
        consequuntur, error facere ipsa sunt?
    </div>
    <div>Accusamus accusantium culpa dicta, ducimus eligendi esse fugit incidunt iste labore natus odit perferendis
        perspiciatis repellendus reprehenderit ullam velit, voluptatum. Alias enim fuga fugit illum, natus quam
        reiciendis. Asperiores, atque.
    </div>
    <div>Autem consectetur doloremque expedita ipsum itaque magni odit officia quasi tenetur ullam? A at cumque magni
        molestiae. Beatae blanditiis dolore, libero minima modi nemo officiis, omnis sequi sit tempore voluptas.
    </div>
    <div>Animi consectetur cumque cupiditate delectus earum et fuga impedit ipsa maxime nemo nulla officia pariatur
        quaerat quasi reiciendis rem repellendus similique, voluptas? Accusamus asperiores at culpa dolore magnam, quo
        voluptates?
    </div>
    <div>Deserunt magnam sed vero. Error ipsam necessitatibus omnis repudiandae sequi, sit sunt! Assumenda autem
        consequuntur doloremque et id incidunt magni, modi praesentium quae quia, tempore totam! Est quam sed suscipit.
    </div>
    <div>A accusantium aliquam aperiam at atque beatae cupiditate dolores dolorum ducimus earum eius fuga, laudantium
        libero minima mollitia natus necessitatibus nisi perspiciatis quas qui quisquam repellat reprehenderit tempore
        totam voluptas.
    </div>
    <div>Ab architecto atque consequuntur debitis dicta dignissimos eligendi error est eveniet exercitationem ipsa ipsam
        minus neque, nisi non possimus provident ratione rerum sed vitae? Ad dolore dolorum reprehenderit sed ullam.
    </div>
    <div>Debitis dicta harum laborum modi, rem sapiente tempora ullam veritatis! Alias aliquam, asperiores cumque
        deserunt eveniet ipsa laboriosam nam nostrum odio reiciendis sequi, voluptatibus. Dolorum labore mollitia
        necessitatibus nostrum numquam?
    </div>
    <div>Accusamus aperiam autem debitis facilis praesentium quaerat vitae! Aliquid aut consequatur deleniti dolor
        doloribus, facilis modi molestiae necessitatibus nemo nesciunt nisi odio rerum sint soluta tempora tempore
        voluptatum? Beatae, sed.
    </div>
    <div>Adipisci architecto cumque doloribus, ea eius eligendi exercitationem fugiat harum incidunt ipsa iste
        laudantium nemo nesciunt nisi nobis omnis optio placeat quisquam quo reiciendis rem repellat repudiandae, sequi
        veniam voluptatem!
    </div>
    <div>Adipisci aliquid dolorem expedita labore necessitatibus nesciunt nobis, omnis saepe similique voluptatum. Amet
        cum expedita fugiat incidunt laboriosam modi necessitatibus neque, nihil perspiciatis quam quis quo repellat
        saepe vel voluptates.
    </div>
    <div>Aliquid dicta doloremque dolores doloribus omnis perferendis, quia sequi sint sit ut! Autem consectetur
        doloremque eos error eveniet maiores nam pariatur quia recusandae repudiandae? A autem dignissimos fugiat
        impedit perferendis.
    </div>
    <div>A aut cupiditate delectus ducimus error fugiat, id magni nisi nulla, odio officia quae quod saepe sapiente,
        veritatis? Aliquid est excepturi iusto nostrum optio temporibus unde veniam voluptates. Ab, minima?
    </div>
    <div>Animi deleniti dicta fugiat illum molestias perferendis porro quam ratione recusandae ut! Architecto corporis
        culpa cupiditate deleniti, doloremque fugiat modi molestiae officia, quia, quibusdam repellendus sequi sint
        tempora ut veritatis?
    </div>
    <div>At deleniti deserunt dolores eos expedita harum molestiae quae quasi recusandae soluta! Aliquam, blanditiis
        dolores, enim error facilis natus obcaecati perferendis quasi, qui rerum ut vero. Magni, quod soluta. Sit.
    </div>
    <div>Architecto asperiores consectetur culpa, deleniti deserunt dicta dolores doloribus ea eius est eum fugiat
        impedit ipsa molestiae mollitia nobis perferendis, perspiciatis possimus praesentium quas rem reprehenderit
        tempora! Assumenda consequuntur, voluptatem!
    </div>
    <div>Exercitationem iusto provident sunt vel vero. Architecto atque autem consequatur deserunt dolorem dolores error
        expedita harum id magnam minima modi neque nulla obcaecati, perspiciatis qui quo sunt tenetur. Doloribus,
        quisquam!
    </div>
    <div>Deleniti dignissimos harum nesciunt odit sapiente sit sunt. Ab at consectetur deserunt distinctio dolore,
        dolorem esse est excepturi facere illo iste neque non optio porro, quae quas rem tempore unde?
    </div>
    <div>Deleniti exercitationem expedita iure officiis quis tenetur velit! Beatae facilis fuga ipsam magnam nisi.
        Beatae cum ducimus eius enim illo iusto molestiae nihil, nostrum quibusdam quo repellat similique ut voluptas?
    </div>
    <div>Animi aperiam assumenda beatae consequatur distinctio eveniet, expedita fuga, id ipsa natus nihil nobis,
        obcaecati quod repellat tempore. Aliquid nemo vitae voluptas? A ad doloribus enim fuga fugit velit veritatis.
    </div>
    <div>Harum incidunt laudantium odio! Assumenda beatae cupiditate eos error in laborum, maxime minima quos
        reprehenderit vitae! Amet cumque, cupiditate dolore dolores ex harum impedit laudantium maiores quod, sint sunt
        voluptatibus!
    </div>
    <div>A accusantium, alias architecto, autem dignissimos distinctio incidunt perferendis quaerat quo quos repellat
        rerum ut voluptas! Accusantium, architecto blanditiis consequuntur dicta dolorum fugiat provident, quia quidem
        ratione rem tempora tenetur.
    </div>
    <div>Adipisci beatae blanditiis delectus eaque est expedita harum impedit nulla officia omnis perferendis
        perspiciatis placeat quas quo tenetur velit vitae, voluptatibus! Animi assumenda doloribus facilis molestias
        quasi tenetur velit, voluptas.
    </div>
    <div>Animi itaque nesciunt officia quas quo quos repudiandae, similique. Ab aperiam delectus, ea fugit impedit iste
        nisi quas quasi, quod saepe soluta vero voluptatum. Beatae ducimus eos nam non repellendus?
    </div>
    <div>Ab alias deleniti distinctio, earum ex facere fuga hic libero minus natus nesciunt, pariatur, porro possimus
        quod sed suscipit tempore tenetur voluptatibus! Exercitationem, numquam veniam. Doloribus placeat quod tempora
        totam!
    </div>
    <div>Commodi consequuntur fuga modi molestiae similique! Ad culpa cum deleniti, dolor dolorem enim eveniet expedita
        facilis, fuga id illo iusto libero magnam nisi odit pariatur quas quidem reiciendis tempora tenetur!
    </div>
    <div>Ex natus quos tenetur? Accusantium, alias aperiam atque beatae blanditiis consequuntur dolorem dolores ducimus
        excepturi fugit mollitia necessitatibus neque omnis pariatur quasi veniam voluptas, voluptates. Deleniti error
        harum neque officia?
    </div>
    <div>Amet, animi debitis dolorum earum incidunt ipsum, itaque provident quia quidem, quos sequi tempora unde!
        Accusantium ad animi atque, commodi eaque, eligendi iste libero porro quisquam quod reprehenderit rerum tempore?
    </div>
    <div>Ad dolore labore necessitatibus repellat voluptates? A accusantium aliquid assumenda atque earum esse facere
        fugiat harum impedit iure modi nam obcaecati odio, perferendis placeat quod, rem reprehenderit, sint tempora
        voluptatum!
    </div>
    <div>Aliquam aut autem eos iusto maiores nemo nostrum sed? Asperiores debitis delectus dolorum facere harum id,
        ipsum iusto laborum maiores neque nisi, odio, quibusdam quos repellendus saepe sequi tenetur voluptatibus.
    </div>
    <div>Aperiam aut debitis dicta, doloribus, illo iure magni odit, quibusdam quidem sint totam veniam! Cum, debitis
        ducimus facere fugit labore, magni porro, quaerat quia quo ratione reprehenderit soluta suscipit veniam!
    </div>
    <div>Ad alias aliquid commodi cum debitis deserunt ducimus eligendi enim fugit illo itaque magnam, magni maiores
        modi nostrum numquam odio optio porro praesentium provident quas quidem, repudiandae sapiente sequi, veritatis?
    </div>
    <div>Aperiam dolorum ducimus eum iure laborum maxime, numquam praesentium reiciendis rerum sed totam, ullam.
        Excepturi facilis fugiat molestias, odio perspiciatis quam rerum ut. Corporis ducimus explicabo nesciunt quis
        rem tempore?
    </div>
    <div>Accusamus aspernatur consequuntur debitis dolor dolore doloremque ea eligendi eum expedita fuga, harum illo
        ipsam itaque iure maiores natus necessitatibus non nostrum perferendis provident quisquam, sed similique sint
        voluptate voluptatibus!
    </div>
    <div>Asperiores aspernatur aut dicta doloremque esse illum inventore, iure labore minima neque perferendis quae quo
        reiciendis rerum similique tempore vero! Ab, amet aperiam asperiores minima perferendis quasi quis rem
        similique!
    </div>
    <div>Architecto aut deleniti eius, necessitatibus quisquam rerum tempora. Accusamus eos error fugit porro quaerat
        quod voluptatum. Aut deleniti doloribus facere ipsum magnam modi molestiae numquam officiis praesentium quod
        repudiandae, tempore!
    </div>
    <div>Architecto beatae cupiditate dolor esse eum libero nam quisquam sequi vero voluptatem! Ad aperiam dolorem
        doloribus eligendi et ex in libero maiores molestiae, quam sit, tempora voluptates? Delectus, dignissimos,
        error!
    </div>
    <div>A architecto aspernatur debitis delectus dolores dolorum, eaque excepturi exercitationem, fugit id ipsam iusto
        maiores minima nostrum officia quae quaerat quas qui saepe sunt tempore velit veritatis voluptate voluptatem
        voluptates!
    </div>
    <div>Ab aliquam doloribus eligendi harum nesciunt nisi non numquam reiciendis repellendus velit! Aliquid, impedit,
        quas! Ad corporis dolores ea explicabo facere fugiat porro quaerat quia totam ullam. Dolor, neque nobis.
    </div>
    <div>Dolor esse iusto rerum sunt suscipit. A ab adipisci commodi corporis deleniti, ducimus esse facere facilis iste
        magni, minima nam necessitatibus pariatur placeat quas sapiente sequi suscipit totam. Ipsam, natus!
    </div>
    <div>Accusamus adipisci amet architecto asperiores aspernatur consectetur consequuntur doloribus, error, eum fuga
        hic illo iure laboriosam laudantium officiis, qui recusandae sed sequi sint tempore veniam voluptatem
        voluptatum. Esse, minima, quae.
    </div>
    <div>Asperiores aspernatur cupiditate modi, omnis praesentium qui quis repudiandae tempore? A cumque doloremque ea,
        esse eveniet exercitationem fugiat incidunt inventore labore maiores optio provident qui, repudiandae, sint
        soluta! Consequuntur, nam.
    </div>
</div>
</body>
</html>